<template>
  <div id="chart-box" style="height: 100%; width: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts'
import liaoNing from '@/assets/json/liaoNing.json'
import { queryMap } from '@/api/index.js'
export default {
  data () {
    return {
      recordsId: ''
    }
  },
  methods: {
    getQueryMap () {
      let params = {
        recordsId: this.recordsId
      }
      queryMap(params).then(res => {
        let aaa = []
        res.data.data.map(q => {
          if (q) {
            aaa.push(q)
          }
        })
        const uniqueArr = aaa.filter((item, index) => aaa.findIndex(i => i.trainingBase === item.trainingBase) === index)
        console.log(uniqueArr)

        let data = liaoNing
        echarts.registerMap('yls', data)
        const chart = echarts.init(document.getElementById('chart-box'))

        let coord = liaoNing.features.map((item, index) => {
          return {
            name: item.properties.name,
            value: item.properties.center,
            symbolSize: 10
          }
        })
        let arrData = []
        uniqueArr.map(q => {
          arrData.push({
            name: q.trainingBase,
            value: [Number(q.longitude), Number(q.latitude)],
            symbolSize: 10
          })
        })
        console.log('coord', coord)
        let linesCoord = arrData.map(item => {
          return {
            coords: [
              [121.774815, 39.087663],
              item.value
            ]
          }
        })
        console.log(arrData)
        const option = {
          geo: {
            map: 'yls',
            roam: true,
            zoom: 4.23,
            center: [121.774815, 39.007663],
            left: '15%',
            top: '1%',
            bottom: '1%',
            label: {
              show: false
            },
            silent: true,
            itemStyle: {
              normal: {
                borderColor: '#00fdfa60',
                areaColor: '#01AAFF80',
                borderWidth: 1,
                shadowBlur: 20,
                shadowColor: 'rgba(0,255,255,.5)'
              }
            }
          },

          series: [
            {
              name: ' 辽宁省内点',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: arrData,
              label: {
                show: true,
                formatter: '{b}',
                color: '#00fdfa',
                fontSize: 12
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  borderWidth: 0
                }
              },
              itemStyle: {
                color: 'rgb(0,255,255)',
                iconType: 'roundRect ',
                iconSize: 16,
                position: 'right'
              }
            },
            {
              name: '地图外的点',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: [
                {
                  name: '辽宁省大医二院',
                  value: [121.774815, 39.087663],
                  symbolSize: 20,
                  iconSize: 10,
                  symbol: 'path://M512,0c282.76800537109375,0,512,229.23199462890625,512,512c0,282.76800537109375,-229.23199462890625,512,-512,512C229.23199462890625,1024,0,794.7680053710938,0,512C0,229.23199462890625,229.23199462890625,0,512,0Zm9.3759765625,272L341.1839904785156,272a29.984,29.984,0,0,0,-29.91998291015625,30.032012939453125L311.2640075683594,752l399.9999694824219,0L711.2639770507812,432c0,-16.496002197265625,-13.4239501953125,-30,-29.98394775390625,-30l-130,0l0,-100.09600830078125A29.904,29.904,0,0,0,521.3599853515625,272ZM481.2799987792969,562l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90.0159912109375,0a20,20,0,1,1,0,-40l90.0159912109375,0Zm0,-100l2.032012939453125,0.09600830078125a20,20,0,0,1,-2.032012939453125,39.90399169921875l-90,0a20,20,0,1,1,0,-40l90,0Zm-5.00799560546875,-100l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90,0l-2.048004150390625,-0.11199951171875a20,20,0,0,1,2.048004150390625,-39.88800048828125l90,0Z'
                }
              ],
              symbolSize: 138,
              itemStyle: {
                normal: {
                  color: '#6dff00'
                }
              },
              label: {
                show: true,
                iconSize: 150,
                formatter: '{b}',
                color: '#6dff00',
                position: 'bottom'

              }
            },
            {
              type: 'lines',
              coordinateSystem: 'geo',
              effect: {
                show: true,
                constantSpeed: 90,
                symbol: 'pin',
                symbolSize: 12,
                trailLength: 0
              },
              symbol: ['none', 'arrow'],
              symbolSize: [0, 12],
              lineStyle: {
                color: '#6dff0050',
                width: 2,
                opacity: 0.5,
                curveness: 0.2
              },
              data: linesCoord
            }

          ]
        }

        chart.setOption(option)
        window.addEventListener('resize', this.refresh)
      })
    },
    refresh () {
      var myChart = echarts.getInstanceByDom(
              document.getElementById('chart-box')
          )
      if (myChart !== null && myChart !== undefined) {
        myChart.resize()
      }
    }
  },
  mounted () {
    this.recordsId = this.$route.query.recordsId
    this.getQueryMap()
  },
  unmounted () {
    window.removeEventListener('resize', this.refresh)
  }

}
</script>

<style lang="scss" scoped>
#chart-box {
  div {
      width: 100%;
      height: 100%;
  }
}
</style>